import React, { Component } from "react";
import CourseItem from "./CourseItem";

// 掌握map的使用规则和作用
let arr = [1, 2, 3, 4];
let newArr = arr.map((item) => <li>8</li>);
console.log(newArr);

export default class CourseList extends Component {
    state = {
        courseData: [
            { name: "Nodejs", task: 0, stu: 20, id: "001" },
            { name: "js", task: 3, stu: 20, id: "002" },
            { name: "No", task: 4, stu: 20, id: "003" },
            { name: "dejs", task: 2, stu: 20, id: "004" },
            { name: "de", task: 5, stu: 20, id: "005" },
            { name: "dej", task: 3, stu: 20, id: "007" },
            { name: "dej", task: 3, stu: 20, id: "008" },
            { name: "dej", task: 3, stu: 20, id: "009" },
        ],
    };
    render() {
        return (
            <div
                style={{
                    display: "flex",
                    justifyContent: "space-between",
                    flexWrap: "wrap",
                }}
            >
                {/* 传入参数是一个对象 */}
                {/* {this.state.courseData.map((item) => (
                    <CourseItem data={item} key={item.id} />
                ))} */}

                {this.state.courseData.map((item) => {
                    return (
                        <CourseItem
                            key={item.id}
                            stu={item.stu}
                            task={item.task}
                            name={item.name}
                        />
                    );
                })}
                {/* 批量传属性 */}
                {/* {this.state.courseData.map((item) => {
                    return <CourseItem {...item} key={item.id} />;
                })} */}
                {/* <CourseItem /> */}
            </div>
        );
    }
}
